<template>
  <div class="home">
    <input type="text" v-model="keyword" @blur="search" />
    <my-history v-if="$store.state.history.length != 0 && result.length == 0" />

    <ul>
      <li v-for="item in result" :key="item.goods_id">{{ item.goods_name }}</li>
    </ul>
  </div>
</template>

<script>
// @ is an alias to /src
import myHistory from "@/components/myHistory.vue";
import { ref, reactive, toRefs } from "vue";
import { useStore } from "vuex";
import { getResult } from "../utils/http";

export default {
  name: "Home",
  components: {
    myHistory,
  },
  setup(props) {
    const store = useStore();
    const data = reactive({
      keyword: "",
      result: [],
    });

    const search = () => {
      store.commit("setHistory", data.keyword);
      getResult(data.keyword).then((res) => {
        console.log(res);
        if (res.meta.status == 200) {
          data.result = res.message;
        } else {
          data.result = [];
        }
      });
    };
    return { ...toRefs(data), search };
  },
};
</script>
